<template>
	<view class="square-page">
		<view class="square-list">
			<div class="square-item">
				<div class="square-user-top">
					<div class="user-img">
						<image class="img" :src="item.avater || '/static/images/bj.png'" mode="aspectFill"></image>
					</div>
					<div class="user-cont">
						<div class="user-name">{{data.real_name}}</div>
						<div class="user-time">{{data.create_time}}</div>
					</div>
				</div>
				<div class="square-cont">
					{{data.content}}
				</div>
				<div class="square-img">
					<div class="imgbox" v-for="(v,index) in data.cover" :key="index">
						<image class="img" :src="v" mode="aspectFill" @click="TanPreviewImage(index,data.cover)"></image>
					</div>
				</div>
			</div>
		</view>
		<view style="height: 100rpx;"></view>
		<view class="shop-foot flex-y-center">
			<view class="recharge flex-grow-1">联系人：{{data.real_name}}</view>
			<view class="btn flex-col flex-center" @tap="call(data.phone)">
				<i class="Ticonfont Ticon-dianhua" style="color: red;"></i>
				<text>拨打电话</text>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				data:{},
				infoData: {
					imglist: ['/static/images/banner1.jpg', '/static/images/banner2.jpg',
						'/static/images/banner3.jpg', '/static/images/banner4.jpg',
						'/static/images/banner1.jpg', '/static/images/banner2.jpg',
					],
					content: '今天发布了一条招聘信息，有需要的话可以联系下方电话号码，1517023xxxxxx'
				},

			}
		},
		onLoad(e) {
			this.id = e.id;
			this.detail();
		},
		mounted() {},
		onShow() {},
		onReady() {},
		methods: {
			detail() {
				this.$H.get('/index/get_information',{id:this.id}).then(res => {
					this.show = false;
					this.data = res.data
				})
			},
			/**
			 * 图片预览功能
			 * @param url_List 图片预览地址 
			 * @param index 预览的图片的索引 
			 */
			TanPreviewImage(index,src) {
				uni.previewImage({
					current: index,
					urls: src
				});
			},
			call(phone) {
				uni.makePhoneCall({
					phoneNumber: phone,
					success: function() {
						console.log('拨打电话成功');
					},
					fail() {
						console.log('打电话失败了');
					}
				})
			}

		}
	}
</script>

<style scoped lang="scss">
	page {
		background: #f5f5f5;
	}

	.square-page {
		background: #f5f5f5;
	}

	.square-item {
		margin: 20rpx 0px;
		padding: 20rpx 10rpx;
		box-sizing: border-box;
		background: #fff;

		.square-user-top {
			display: flex;
			align-items: center;
			padding: 0px 10rpx;

			.user-img {
				width: 70rpx;
				height: 70rpx;
				overflow: hidden;
				border-radius: 50%;
				margin-right: 10rpx;

				.img {
					width: 100%;
					height: 100%;
				}
			}

			.user-cont {
				.user-name {
					color: #333;
					font-size: 32rpx;
				}

				.user-time {
					font-size: 24rpx;
					color: #666;
				}
			}
		}

		.square-cont {
			padding: 10rpx;
			color: #333;
			font-size: 28rpx;
		}

		.square-img {
			display: flex;
			flex-wrap: wrap;

			.imgbox {
				width: 33.33%;
				height: 200rpx;
				padding: 0px 10rpx;
				box-sizing: border-box;
				margin-bottom: 10rpx;

				.img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.shop-foot {
		position: fixed;
		bottom: 0px;
		left: 0px;
		height: 120rpx;
		width: 100%;
		background: #fff;
		padding: 0px 10rpx;
		box-sizing: border-box;

		.btn {
			width: 150rpx;
			height: 100%;
			color: #363636;
			padding: 0px;
			line-height: 28rpx;
			margin: 0px;
			font-size: 24rpx;
			border: 0px !important;
			background: none !important;

			text {
				margin-top: 10rpx;
			}
		}

		button {
			background: none;
			border-bottom: none;
			border-left: none;
			border-radius: 0px;

			&::after {
				border: none;
			}
		}

		.recharge {
			background: rgba(23, 191, 139, 1);
			height: 85rpx;
			line-height: 85rpx;
			text-align: center;
			font-weight: bold;
			font-size: 32rpx;
			color: #fff;
			border-radius: 10rpx;
		}
	}
</style>